import {
    Form,
    Input,
    Button,
} from 'antd-mobile'
import { useCountDown } from '../hooks'
import { LoginApi } from '../api/user'
import { getTelCodeApi } from '../api/user'
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
function Login() {
    const nav=useNavigate()
    const [fn, num, isDisabled] = useCountDown()
    const [form] = Form.useForm()
    const onFinish=()=>{
        nav('/home')
    }
    const getphonecode=()=>{
        fn()

    }
    return (
        <div>
            <Form
                form={form}
                
                layout='horizontal'
                footer={
                    <Button block type='submit' color='primary' size='large' onClick={onFinish}>
                        登录
                    </Button>
                }
            >
                <Form.Item
                    name='tel'
                    label='手机号'
                    rules={[{ required: true, message: '手机号不能为空' },
                    {
                        pattern: /^1\d{10}$/, message: '手机格式不正确'
                    }
                    ]}
                >
                    <Input onChange={console.log} placeholder='请输入手机号' />
                </Form.Item>
                <Form.Item
                    name='telCode'
                    label='验证码'
                    rules={[{ required: true, message: '验证码不能为空' }]}
                    extra={<Button onClick={getphonecode} disabled={isDisabled}>{isDisabled ? `${num}s后重新发送` : '获取验证码'}</Button>}
                >
                    <Input onChange={console.log} placeholder='请输入验证码' />
                </Form.Item>
            </Form>
        </div>
    )
}
export default Login